<template>
  <div class="my-search">
    <el-form ref="elForm" :model="model" label-width="100px" size="small">
      <template v-if="fields && fields.length > 0">
        <el-row :gutter="10">
          <el-col v-for="(field, i) in fields" :key="i" v-bind="colConfig">
            <el-form-item :label="field.label" :prop="field.prop">
              <slot :name="field.prop" :data="field">
                <query-item :data="field" :model="model"  :dicts="dicts"/>
              </slot>
            </el-form-item>
          </el-col>
          <slot></slot>
          <el-col v-bind="colConfig">
            <el-button type="primary" icon="el-icon-search" size="small" @click="onQuery">查询</el-button>
            <el-button icon="el-icon-refresh-left" size="small" @click="onReset">重置</el-button>
          </el-col>
        </el-row>
      </template>
    </el-form>
  </div>
</template>
<script>
import queryItem from './query-item'

const selectTag  = ['el-select', 'el-cascader', 'el-radio-group', 'el-checkbox-group']

export default {
  name: 'my-search',
  components: {
    queryItem
  },
  props: {
    columns: Array,
    tableForm: Object,
    colConfig: {
      type: Object,
      default() {
        return {
          xs: 12,
          sm: 12,
          md: 8,
          lg: 6,
          xl: 4
        }
      }
    }
  },
  data() {
    return {
      fields: [],
      model: {},
      dicts: {}
    }
  },
  watch: {
    fields: {
      handler(nval) {
      },
      immediate: true
    },
    columns: {
      handler() {
        this.generField()
      },
      immediate: true
    }
  },
  methods: {
    changeDicts() {
      this.dicts = Object.assign({}, this.dicts)
    },
    init() {
      this.generField()
    },
    generField() {
      const cols = this.columns.filter(o => o.isQuery === '1')
      let fields = []
      if(this.tableForm) {
        fields = this.tableForm.fields || []
      }

      const querys = []

      cols.forEach(col => {
        const {columnComment, columnName, htmlType, dictType} = col
        const data = {
          label: columnComment,
          prop: columnName,
          tag: this.getDefTag(col)
        }

        // 优先使用列表自己配置
        if(htmlType) {
          data.tag = htmlType
          if(this.isSelect(htmlType)) {
            data.dictType = dictType
            this.loadDicts(dictType, htmlType === 'el-cascader' ? 2 : 1)
          }
        } else {
          const find = fields.find(o => o.__vModel__ === columnName)
          if(find) { // 有表单，表单配置优先级低
            const {__config__, __slot__, options} = find
            data.tag = __config__.tag
            data.dataType = __config__.dataType

            if(this.isSelect(__config__.tag)) {
              // 静态数据
              if(__config__.dataType === 'static') {
                if(options) {
                  data.options = options
                } else {
                  data.options = __slot__.options
                }
              } else {
                data.dictType = __config__.dictType
                this.loadDicts(__config__.dictType, __config__.tag === 'el-cascader' ? 2 : 1)
              }
            }
          }
        }




        this.$set(this.model, columnName, '')
        querys.push(data)
      })

      this.fields = querys
    },
    getDefTag(col) {
      if(col.columnName.includes('time') ||
        col.columnComment.includes('时间') ||
        col.columnComment.includes('日期') ) {
        return 'el-date-picker'
      }
      return 'el-input'
    },
    isSelect(tag) {
      return selectTag.includes(tag)
    },
    async loadDicts(dictType, dictKind) {
      if(this.dicts[dictType]) return
      console.info(dictType, dictKind)
      this.dicts[dictType] = await this.$store.dispatch('loadDictByType', {dictType, dictKind})

      this.changeDicts()
    },
    onReset() {
      this.$refs.elForm.resetFields()
      console.info('reset')
      this.$emit('onClear')
    },
    onQuery() {
      this.$emit('onQuery', this.model)
    }
  },
  computed: {
  },
  mounted() {
    this.init()
  }
}
</script>
<style scoped lang="scss">
.my-search {
  padding: 0 0 0 20px;

  ::v-deep {
    .el-input__inner,
    .el-cascader,
    .el-select,
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 100%;
    }
  }

}
</style>
